<template>
	<view class="authentication">
		<common-navbar title="个人资料"></common-navbar>
		<view class="">
			<cellItem title="头像" height="180">
				<button class="choose-avatar-btn" slot="cell-right" open-type="chooseAvatar"
					@chooseavatar="bindchooseavatar">
					<u-image
						:src="userData.userAvatar.avatarUrl?userData.userAvatar.avatarUrl:require('@/static/image/avatar-default.png')"
						width="100%" height="100%" border-radius="50%" />
				</button>
			</cellItem>
			<cellItem title="姓名" :isShowArrow="false">
				<input slot="cell-right" type="nickname" placeholder="请输入姓名"
					placeholder-style="color: #e1e1e1; fontSize: 28rpx;" class="nickname-input"
					v-model="userData.userName" @blur="onBlur">
			</cellItem>
			<cellItem title="性别" :label="userData.gender.genderLabel" @click="isSelectGenderCellShow = true" />
			<cellItem title="所在地区" :label="locationData.province+locationData.city+locationData.area"
				@click="isChooseCityCellShow = true" />
		</view>
		<button class="submit-btn" :disabled="isSumbitButtonDisabled" :class="{'isDisabled':isSumbitButtonDisabled}"
			@click="submits" throttle-time='1000'>提交</button>
		<!-- 性别 -->
		<u-select v-model="isSelectGenderCellShow" :list="genderList" @confirm="confirmGender"></u-select>

		<!-- 所在地区 -->
		<u-picker mode="region" v-model="isChooseCityCellShow" @confirm="confirmLocaltion" title='所在地区'></u-picker>

	</view>
</template>


<script>
	import cellItem from "@/components/cell-item/cellItem.vue";
	export default {
		components: {
			cellItem
		},
		computed: {
			isSumbitButtonDisabled() {
				return !(this.userData.userAvatar.avatarId && this.userData.userName && this.locationData.province && this
					.locationData.city && this
					.locationData.area && this.userData.gender.genderValue)
			}
		},
		onLoad(options) {
			if (options.isEdit) {
				this.isEdit = true;
			}
			if(this.userInfo){
				this.userData.userAvatar.avatarUrl = this.userInfo.avatars;
				this.userData.userAvatar.avatarId = this.userInfo.avatars_id;
				this.userData.userName = this.userInfo.nickname;
				this.userData.gender.genderValue = this.userInfo.sex;
				this.userData.gender.genderLabel = (this.genderList.find(item => this.userInfo.sex == item.value)).label;
				this.locationData.province = this.userInfo.province;
				this.locationData.city = this.userInfo.city;
				this.locationData.area = this.userInfo.area;
			}
			// console.log(this.userInfo);
		},
		data() {
			return {
				isEdit: false,
				userData: {
					userName: '',
					gender: {
						genderLabel: '',
						genderValue: '',
					},
					userAvatar: {
						avatarUrl: '',
						avatarId: '',
					},
				},
				locationData: {
					province: '',
					city: '',
					area: '',
					areaCode: [],
				},
				isChooseCityCellShow: false,
				isSelectGenderCellShow: false,
				genderList: [{
						label: '男',
						value: 1
					},
					{
						label: '女',
						value: 2
					}
				]
			}
		},
		methods: {
			onBlur(e) {
				console.log(e.detail.value)
				this.userData.userName = e.detail.value;
			},
			bindchooseavatar(e) {
				console.log('被选中的头像>>>>>>>>>>>>>>>>', e.detail.avatarUrl);
				this.unloadUserAvatar(e.detail.avatarUrl);
			},
			confirmLocaltion(location) {
				this.locationData.province = location.province.label;
				this.locationData.city = location.city.label;
				this.locationData.area = location.area.label;
				this.locationData.areaCode = [location.province.value, location.city.value, location.area.value];
			},
			confirmGender(e) {
				this.userData.gender.genderLabel = e[0].label;
				this.userData.gender.genderValue = e[0].value;
			},
			unloadUserAvatar(filePath) {
				uni.uploadFile({
					url: `https://www.gdlzjt.com/api/upload/uploadImagesCos`,
					filePath,
					name: 'file',
					success: res => {
						console.log(res)
						const data = JSON.parse(res.data);
						if (data.status_code == 200) {
							this.userData.userAvatar.avatarId = data.data.file_id;
							this.$set(this.userData.userAvatar, 'avatarUrl', data.data.file_url);
							this.$showToast('上传头像成功');
						} else {
							this.$showToast('上传头像失败')
						}
					},
					fail: err => {
						console.log(err)
						this.$showToast('上传头像失败');
					}
				})
			},
			async submits() {
				try {
					let userInfoFormData = {
						avatars: this.userData.userAvatar.avatarId,
						nickname: this.userData.userName,
						province: this.locationData.province,
						city: this.locationData.city,
						area: this.locationData.area,
						sex: this.userData.gender.genderValue
					}
					await this.$u.post(this.$restUrl.perfectInformation, userInfoFormData);
					const {
						data
					} = await this.getUserInfo();
					this.$u.vuex('userInfo', data);
					this.$loginResolve();
					//登录环信
					getApp().globalData.webSocketConnect();
					if (this.isEdit) {
						uni.navigateBack({success:()=>{
							this.$showToast('已保存修改')
						}})
					}else if(this.shareCode){
						this.$u.route({
							url: `/pages/promote_visitor/promoteVisitor?shareCode=${encodeURIComponent(this.shareCode)}`,
						})
					}else{
						uni.switchTab({
							url:'/pages/home/home'
						})
					}
				} catch (e) {
					console.log(e)
				}
			},
			getUserInfo() {
				return this.$u.post(this.$restUrl.getUserInfo);
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./authentication.scss"
</style>
